<template>
  <div
    v-for="(item, index) in data"
    :key="item"
    :class="{ side_top: index > 0 }"
    style="line-height: 52px; height: 52px"
  >
    <div class="flex w-[100%] text-[14px]">
      <div class="w-[300px] flex items-center" style="min-width: 60px">
        <div>
          <span
            :class="
              item?.status == 0
                ? 'yellow'
                : item?.status == 1
                ? 'red'
                : 'grayre'
            "
            class="w-[8px] h-[8px] rounded-[50%] mr-[4px] inline-block"
          ></span>
        </div>
        <span
          :class="{
            line_through: item.status == 2,
            title_color: item.status !== 2,
          }"
          class="whitespace-nowrap overflow-hidden mr-[10px]"
          @click="handleDetails(item.id)"
          :title="item.title"
          >{{ item.title }}</span
        >
      </div>
      <div style="min-width: 60px; width: 170px" class="flex items-center">
        <el-avatar
          :size="20"
          :src="avatarSrc(item)"
          class="w-[20px] h-[20px]"
        />
        <span class="whitespace-nowrap overflow-hidden ml-[4px]">{{
          item.processed_user_text
        }}</span>
      </div>
      <div class="text-right mr-[4px]" style="min-width: 60px; width: 220px">
        <span
          class="whitespace-nowrap overflow-hidden"
          :class="{
            line_through: item.status == 2,
            color_red: item.status == 1,
          }"
          >{{ item.status == 0 ? "截止" : item.status == 1 ? "超时" : ""
          }}{{ item.deadline_time }}</span
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import defaultAvatar from "@/assets/images/touxiang.png";
const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["details"]);
const { data } = toRefs(props);
const avatarSrc = (item) => {
  return item.processed_user_picture
    ? item.processed_user_picture
    : defaultAvatar;
};
const handleDetails = (val) => {
  emit("details", val);
};
</script>
<style lang="scss" scoped>
.side_top {
  border-top: 1px solid var(--base-border-color);
}
// 灰色
.grayre {
  background: #989898;
}
//红色
.yellow {
  background: #f2a911;
}
//黄色
.red {
  background: #e4040d;
}
.color_red {
  color: #e4040d;
}
.line_through {
  text-decoration: line-through;
  color: #979797;
}
.title_color {
  color: #3487ff;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
</style>
